<template>
	<view>
		<view class="list-view">
			<view class="tui-flex-box">
				<view class="tui-flex" style="flex-wrap: wrap;" v-for="(item,index) in topicViews" :key="index">
					<view :style="index %2 == 0? 'background-color: #FAFAFA;':''" style="width: 100%;box-shadow: 2rpx 1rpx 1rpx #D1D1D1">
						
						
						<view style="height: 30rpx;width: 100%;"></view>
					<navigator :url='"/pages/user/user?id=" + item.memberId' hover-class='none' style="display: flex; ">
						<view class="tui-left tui-col-12" style="margin-left: 30rpx;height: 60rpx;display: flex;">
							<image :src="item.memberAvatar" mode="widthFix" style="width: 60rpx;border-radius: 60rpx;"></image>
							<text style="font-size: 24rpx;font-weight: bold;margin-left: 20rpx;color: #8A5966;display: flex;align-items: center;justify-content: center;">{{item.memberNickname}}</text>
						</view> 
					</navigator>
		
					<navigator :url="'/pages/community/topicInfo?topicId=' + item.id" hover-class='none' style="display: flex; flex-wrap: wrap;width: 100%;">
		
						<view class="tui-left tui-col-12" style="margin-left: 30rpx;height: 50rpx;display: flex;width: 100%;" >
		
							<view class="title" style="margin-left: 70rpx;display: flex;align-items: center;justify-content: center;font-size: 30rpx;font-weight: bold;">
									<text v-html="item.title" class="product-buyer-name"></text>
							</view>
						</view>
						
						<view class="tui-left tui-col-12" style="width: 100%;margin-left: 100rpx;opacity:0.85;margin-top: 10rpx;display: flex;width: 80%;color: #666666;font-size: 26rpx;" >
							<!-- 定义临时变量 -->
							<view v-show="false">{{imgList = htmlUtils.getImageUrls(item.threadsText,3)}}</view>
		
							<view>
								<text  v-html="item.threadsText" class="product-buyer-name2"></text>
								
								<view style="display: flex;flex-wrap: nowrap; margin-top: 20rpx;" >
									
									<!-- 如果图片为多张,遍历.而且第二张开始,图片有间隔 -->
									<image v-for="(img,index) in imgList" :key="index" :src="img" :style="index > 0 ?'margin-left: 30rpx;':''" style="height: 100rpx;width: 150rpx;display: flex"></image>
								</view>
							</view>
							
						</view>
						
						
		
						<view class="tui-left tui-col-12" style="margin-top: 40rpx;margin-left: 40rpx;height: 50rpx;display: flex;flex-wrap: nowrap;">
							
		
							<view class="tui-left tui-col-6" style="font-size: 20rpx;">
		
								<text style="font-size: 22rpx;" v-text="relativeTimeGetter.getText(item.createTime)"></text>
							</view>
		
							<view class="tui-left tui-col-6" style="margin-right: 20rpx;display: flex;justify-content: flex-end;">
								<view style="color: #666666;font-size: 20rpx;" >
		
									<tui-icon :name="'eye'" :size="20" :color="'#666666'"></tui-icon>
									<text v-text="'   ' + item.viewCount + '  '">
										{{item.viewCount}}
									</text>
		
									<tui-icon :name="'message'" :size="20" :color="'#666666'"></tui-icon>
									<text v-text="'   ' + item.replyCount  + '  '"></text>
		
		
									<tui-icon :name="'agree'" :size="20" :color="'#666666'"></tui-icon>
									<text v-text="'   ' + item.praiseCount  + '  '"></text>
		
								</view>
							</view>
						</view >
							
					</navigator>
					</view>
					
				</view>
			
			</view>
		
		</view>
		<tui-nomore v-if="!allowLoading"></tui-nomore> <!--显示没有更多数据-->
	</view>
</template>

<script>
	import searchApi from "@/request/api/searchApi.js"
	import userApi from "@/request/api/userApi.js"
	import relativeTimeGetter from "@/utils/RelativeTimeGetter.js"
	import textUtils from "@/utils/TextUtils.js"
	import htmlUtils from "@/utils/HtmlUtils.js"
	import listUtils from "@/utils/ListUtils.js"
	export default {
		data() {
			return {
				keyword:'',
				topicList:[],
				topicViews:[],
				page:{
					current:1,
					size:10
				},
				users:[],
				allowLoading:true,//是否允许加载，如果数据已经全部拉取完毕，就可以关闭了
				textUtils:textUtils,
				htmlUtils:htmlUtils,
				relativeTimeGetter:relativeTimeGetter
			}
		},
		mounted(){
		
		},
		onLoad: function(options) {
			this.keyword = options.keyword;
		},
		created() {
			this.getTopics();
		},
		watch:{
			
		},
		/**
		 * 触底拉取数据
		 */
		onReachBottom: function() {
			 if(this.allowLoading){
			 	this.getTopics()
			 }
		},
		methods: {
			/**
			 * 根据关键字搜索帖子
			 */
			 async getTopics(){
				let searchTopicRes = await searchApi.searchTopic(this.keyword,this.page)
				if(searchTopicRes.code != 0) return;
				let list = searchTopicRes.page.list
				this.topicList = [...this.topicList,...list]
				this.page.current = searchTopicRes.page.currPage;
				this.page.size = searchTopicRes.page.pageSize;
				if(list.length == 0 || list.length < this.page.size){
					this.allowLoading = false;
				}
				
				//获取多个帖子的作者信息
				let userIds = [];
				list.forEach((topic)=>userIds.push(topic.userId))	
				if(userIds.length == 0) return;
				let userRes = await userApi.batchUserBaseInfo(userIds)
				if(userRes.code == 0){
					this.users = [...this.users,...userRes.data]		
				}
				this.formatToTopicViews();
			},
			formatToTopicViews(){
				this.topicViews = [];
				this.topicList.forEach((topic)=>{
					//找出该话题的作者
					let user = listUtils.findElem(this.users,"id",topic.userId)
					topic.memberId = user.id;
					topic.memberAvatar = user.avatar
					topic.memberNickname = user.nickname
					this.topicViews.push(topic)
				})
			},
		},
	}
</script>

<style>
	@import '@/static/style/thorui.css';
	/* 单行文本显示字数限制 */
	.product-buyer-name { 
	
		max-width: 400rpx;
	
		overflow: hidden;
	
		text-overflow: ellipsis;
	
		white-space: nowrap;
	
	}
	/* 多行文本显示字数限制 */
	.product-buyer-name2 {
	
		width: 450rpx;
		height: 100rpx;
		overflow:hidden;
		text-overflow:ellipsis; 
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	
	}
</style>
